<template>
  <div class="header">
    <div class="header-left"><i class="iconfont">&#xe624;</i></div>
    <div class="header-input">
      <i class="iconfont">&#xe683;</i>
      <input type="text" placeholder="输入城市/景点/游戏主体"/>
    </div>
    <router-link to="/city">
    <div class="header-right" style="color: #FFFFFF">{{mycity}}<i class="iconfont">&#xe60d;</i></div>
    </router-link>
  </div>
</template>

<script>
    export default {
        name: 'cm',
        props:{
          mycity:String
        },
        data () {
            return {

            }
        },
        mounted(){
        }
    }
</script>
<style lang="stylus" scoped>
  .header{
    height:.44rem
    line-height .44rem
    background:#00bcd4
    color :#FFFFFF
    display:flex
    .header-left{
      margin-left :0.09rem
    }
    .header-input{
      margin-left :0.1rem
      height : 0.3rem
      margin-top 0.07rem
      flex-grow:1;
      display flex
      background :#FFFFFF
      color :#EEF0F2
      border-radius 0.04rem
      line-height 0.29rem
     input{
       margin-left 0.05rem
       width 100%
       border-radius 0.04rem

     }
      i{
        margin-left 0.09rem
      }
    }
    .header-right{
      margin-right : 0.11rem
      margin-left :0.08rem
      i{
        font-size 0.05rem
      }
    }
  }


</style>
